<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page hosted, for webview sample</title>
</head>
<body>
  <p>This page is hosted at an external server. Observe how it interacts with the embedder application</p>
  <button id="sendmessage">Send message to app</button><br>
  <button id="pointerlock">Pointer lock</button><br>
  <button id="captureimage">Capture image</button><br>
  <button id="geoloc">Request geolocation</button><br>
  <a href="http://google.com">Go to google.com</a><br>
  <div id="log"></div><br>

<script type="text/javascript">

(function() {

var log=document.getElementById("log");
var appWindow, appOrigin;

function onMessage(e) {
  appWindow = e.source;
  appOrigin = e.origin;
  console.log(e);
}

function doSendMessage() {
  log.innerText="";
  if (appWindow && appOrigin) {
    appWindow.postMessage("this is a message from the page!", appOrigin)
    log.innerText="message sent";
  } else {
    log.innerText="ERROR: don't have app info - no initial message received";
  }
}

function doPointerLock() {
  document.body.webkitRequestPointerLock();
  log.innerText="Pointer lock requested";
}

function doCaptureImage() {
  var video = document.querySelector('video');
  if (!video) {
    video = document.createElement('video');
    video.style.width="200px";
    video.autoplay = true;
    document.body.appendChild(video);
  }
  navigator.webkitGetUserMedia(
    {video: true, audio: true},
    function(stream) {
      video.src = window.URL.createObjectURL(stream);
      log.innerText="video running, enjoy!";
      }, function(err) { console.log(err);});
}

function doGeoloc() {
  log.innerText="requested position";
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
     log.innerText='position='+position;
    });
  }
}

window.addEventListener('message', onMessage);

document.getElementById("sendmessage").addEventListener('click', doSendMessage);
document.getElementById("pointerlock").addEventListener('click', doPointerLock);
document.getElementById("captureimage").addEventListener('click', doCaptureImage);
document.getElementById("geoloc").addEventListener('click', doGeoloc);

})();

</script>

</body>
</html>
